@extends('admin.layout.layout')
@section('static')
{{-- <link href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet"> --}}
{{-- <script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script> --}}
<script src="https://cdn.bootcss.com/Nestable/2012-10-15/jquery.nestable.min.js"></script>
<style>
.dd {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 20px
}

.dd-list {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none
}

.dd-list .dd-list {
	padding-left: 50px
}

.dd-collapsed .dd-list {
	display: none
}

.dd-empty,.dd-item,.dd-placeholder {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	min-height: 20px;
	font-size: 13px;
	line-height: 20px
}

.dd-handle {
    display: flex;
    justify-content:space-between;
	margin: 5px 0;
	padding: 5px 10px;
	color: #333;
	text-decoration: none;
	border: 1px solid #e7eaec;
	background: #f5f5f5;
	border-radius: 3px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.dd-handle span {
	font-weight: 700
}

.dd-handle:hover {
	background: #f0f0f0;
	cursor: pointer;
	font-weight: 700
}

.dd-item>button {
	display: block;
	position: absolute;
	cursor: pointer;
	float: left;
	width: 25px;
	height: 20px;
	margin: 5px 0;
	padding: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border: 0;
	background: 0 0;
	font-size: 16px;
	line-height: 1;
	text-align: center;
	font-weight: 700;
    z-index: 9;
    left: 32px;
    top:3px;
}

.dd-item>button:before {
	content: '+';
	display: block;
	position: absolute;
	width: 100%;
	text-align: center;
	text-indent: 0
}

.dd-item>button[data-action=collapse]:before {
	content: '-'
}

.dd-empty,.dd-placeholder {
	margin: 5px 0;
	padding: 0;
	min-height: 30px;
	background: #f2fbff;
	border: 1px dashed #b6bcbf;
	box-sizing: border-box;
	-moz-box-sizing: border-box
}

.dd-empty {
	border: 1px dashed #bbb;
	min-height: 100px;
	background-color: #e5e5e5;
	background-image: -webkit-linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff),-webkit-linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff);
	background-image: linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff),linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff);
	background-size: 60px 60px;
	background-position: 0 0,30px 30px
}

.dd-dragel {
	position: absolute;
	z-index: 9999;
	pointer-events: none
}

.dd-dragel>.dd-item .dd-handle {
	margin-top: 0
}

.dd-dragel .dd-handle {
	box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1)
}
.dd-item-content{
    background: #f5f8fa;
    margin-bottom: 7px;
    padding: 3px 5px;
    border-radius: 5px;
}
.dd-item-content:hover .op{
    opacity: 1;
}
</style>
@endsection

@section('content')

 
@component('admin.components.content.rightContent')
        @slot('rightContent')

        <div class="mt-3  mb-3  d-flex justify-content-between container-fluid align-items-center">
                                            
            <div class="col-md-3 row justify-content-between ">
                <h5>
                    <div>数据分类</div>
                    <div class="badge badge-success">(目前支持5层级拖拽编辑,有特殊需求联系管理员增加)</div>
                </h5>
            </div>

            <div class="col-md-9 row justify-content-end">
                    @component('admin.components.button.button',[
                        'text'=>'新增分类',
                        'mini'=>url('/admin/category/create'),
                        'title'=>'新增分类',
                        'classes'=>'mr-1'
                    ])
                    @endcomponent
            </div>


        </div>
        

        
        <div class="container-fluid">

                <div class="dd">  
                    <ol class="dd-list">  
                            @php
                                function recursion($listData,$pid=0){
                                    $html="";
                                    foreach ($listData as $key => $value) {
                                        if($value['pid']===$pid){
                                            //递归获取子菜单
                                            $child="";
                                            $childData=recursion($listData,$value->id);
                                            if($childData){
                                                $child='<ol class="dd-list">'.$childData.'</ol>';
                                            }
                                            $html.='
                                                    <li class="dd-item" data-id="'.$value['id'].'">  
                                                        <div class="d-flex dd-item-content justify-content-between">
                                                                <div class="d-flex align-items-center">
                                                                        <div class="dd-handle">
                                                                            <i class="icon icon-menu"></i>
                                                                        </div>  
                                                                        <div class="ml-4">'.$value['category_name'].'</div>    
                                                                </div>
                                                                <div class="d-flex op">
                                                                            <a title="编辑" data-mini="'.url('/admin/category',['id'=>$value->id,'method'=>'edit']).'" data-title="角色编辑" class="btn-fab btn-fab-sm btn-primary shadow text-white mr-2">
                                                                                <i class="icon-pencil"></i>
                                                                            </a>    
                                                                            <form data-right="删除" data-dangermode="1" action="'.url('/admin/category',['id'=>$value->id]).'" method="POST" class="ajaxForm mr-2 bv-form" reload="me" data-title="是否删除?" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
                                                                                    <input type="hidden" name="_token" value="'.csrf_token().'">   
                                                                                    <input type="hidden" name="_method" value="delete">       
                                                                                    <button class="btn-fab btn-fab-sm shadow btn-danger" title="是否删除?">
                                                                                    <i class="icon icon-delete"></i>
                                                                                    </button>
                                                                                </form>
                                                                </div>
                                                        </div>
                                                        '.$child.'
                                                    </li>  
                                            ';
                                        }
                                    }
                                    return $html;
                                }
                                echo recursion($pageListData);
                            @endphp
                    </ol>  
                </div>  
        </div>

        <script>
            $('.dd').nestable();
            
            $('.dd').on('change',function(){
                var treeJson=$(this).nestable('serialize'); 
                $.post('{{url("/admin/category/~")}}',{tree:JSON.stringify(treeJson),_token:'{{csrf_token()}}',_method:'put'},function(res){
                     if(res.status===200){
                        toastr.success(res.msg);
                     }else{
                        toastr.info(res.msg);
                     }
                });
            });

            // $('.dd').nestable('expandAll');//展开所有节点  
            // $('.dd').nestable('collapseAll');//折叠所有节点  

        </script>
        
    @endslot

@endcomponent
 
  
@endsection